<template>
  <div>
    <div class="head">
      <div class="input">
        <span>培训编号：</span>
        <el-input v-model="queryData.code" placeholder="请输入培训编号" />
      </div>
      <div class="input">
        <span>培训名称：</span>
        <el-input v-model="queryData.plan_name" placeholder="请输入培训名称" />
      </div>
      <div class="input">
        <span>培训状态：</span>
        <el-select v-model="queryData.time_status" placeholder="请选择">
          <el-option label="未开始" :value="0">未开始</el-option>
          <el-option label="进行中" :value="1">进行中</el-option>
          <el-option label="已过期" :value="2">已过期</el-option>
        </el-select>
      </div>
<!--      <div class="input">-->
<!--        <span>上线状态：</span>-->
<!--        <el-select v-model="queryData.online_status" placeholder="请选择">-->
<!--          <el-option label="草稿" :value="1">草稿</el-option>-->
<!--          <el-option label="废弃" :value="2">废弃</el-option>-->
<!--          <el-option label="上线" :value="9">上线</el-option>-->
<!--        </el-select>-->
<!--      </div>-->
      <div class="input">
        <span>培训类型：</span>
        <el-cascader
          :show-all-levels="false"
          :options="options2"
          v-model="queryData.selected_type_ids"
          :props="{ multiple: true, checkStrictly: true, label: 'title', value: 'id' }"
          clearable
        ></el-cascader>
      </div>
      <div class="input">
        <span>时间：</span>
        <el-date-picker
          v-model="queryData.date"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </div>
      <el-button type="primary" class="btn" @click="search">查询</el-button>
      <el-button type="primary" class="btn" @click="reset">重置</el-button>
      <el-button type="primary" class="btn" @click="add">新增培训</el-button>
      <!-- <el-button type="primary" class="btn" @click="set">设置规则</el-button> -->
    </div>
    <div class="box">
      <template>
        <el-tabs v-model="activeName"  @tab-click="handleClickTab">
          <el-tab-pane v-for="tab in tabsList" :key="tab.name" :label="tab.label" :name="tab.name">
            <el-table
              :data="tableData"
              border
              v-loading="isTableLoading"
              empty-text="暂无数据"
              no-filtered-userFrom-text="暂无筛选结果"
              style="width: 100%"
              :max-height="tableHeight"
            >
              <el-table-column type="index" align="center" label="序号" width="50" />
              <el-table-column prop="code" align="center" label="培训编号" min-width="160" />
              <el-table-column prop="plan_name" align="center" label="培训名称" min-width="180" />
              <el-table-column prop="online_status" align="center" label="培训方式"  min-width="100">
                <template #default="scope">
                  {{ scope.row.plan_type == 1 ? '内部培训' : '外部培训' }}
                </template>
              </el-table-column>
              <!--        <el-table-column prop="project_name" align="center" label="项目名称"  min-width="180"></el-table-column>-->
              <el-table-column prop="type_name" align="center" label="培训类型"  min-width="140"></el-table-column>
              <el-table-column prop="company_name" align="center" label="创建人"  min-width="160"></el-table-column>
              <el-table-column prop="date" align="center" label="培训有效期" min-width="200">
                <template #default="scope">
                  {{ scope.row.start_time + ' 至 ' + scope.row.end_time }}
                </template>
              </el-table-column>
              <el-table-column prop="time_status" align="center" label="培训状态"  min-width="100">
                <template #default="scope">
                  {{ scope.row.time_status == 1 ? '进行中' : scope.row.time_status == 2 ? '已过期' : '未开始' }}
                </template>
              </el-table-column>
              <el-table-column prop="online_status" align="center" label="上线状态"  min-width="100">
                <template #default="scope">
                  {{ scope.row.online_status == 9 ? '上线' : scope.row.online_status == 2 ? '废弃' : '草稿' }}
                </template>
              </el-table-column>
              <el-table-column fixed="right" align="center" prop="action" label="操作" width="200">
                <template #default="scope">
                  <div class="action">
                    <span @click="edit(scope.row)">编辑</span>
                    <span v-if="scope.row.online_status != 2" @click="nullify(scope.row)">作废</span>
                    <span v-if="scope.row.online_status == 1" @click="online(scope.row)">上线</span>
                    <span @click="copy(scope.row)">复制</span>
                    <span @click="course(scope.row)">课程列表</span>
                    <span @click="student(scope.row)">学员列表</span>
                    <!--              <span @click="showStatistics(scope.row)">统计</span>-->
                    <span @click="cartList(scope.row)">结业证</span>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              background
              style="margin-top: 5px;text-align: right;"
              @size-change="search"
              @current-change="getList"
              :current-page.sync="queryData.page"
              :page-size.sync="queryData.size"
              layout="total, prev, pager, next,sizes,jumper"
              :total="total"
            >
            </el-pagination>
          </el-tab-pane>
        </el-tabs>
      </template>




    </div>

    <el-dialog title="设置考试" :visible.sync="isShowTest" width="1000px" :close-on-click-modal="false">
      <el-form
        :model="ruleForm"
        style="width: 100%"
        :rules="rules"
        ref="ruleForm"
        label-position="top"
        class="demo-ruleForm"
        inline
      >
        <el-form-item label="选择试卷" prop="testId">
          <el-select style="width: 400px" v-model="ruleForm.testId" placeholder="请选择">
            <el-option label="试卷1" :value="1">试卷1</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="试卷名称" prop="name">
          <el-input style="width: 400px" v-model="ruleForm.name" placeholder="请输入"></el-input>
        </el-form-item>
        <br />
        <el-form-item label="合格分数" prop="qualified">
          <el-input-number
            :controls="false"
            :min="1"
            style="width: 400px"
            v-model="ruleForm.qualified"
            label="请输入合格分数"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="不合格补考次数" prop="makeUp">
          <el-radio v-model="ruleForm.makeUp" :label="0">不限</el-radio>
          <el-radio v-model="ruleForm.makeUp" style="margin-right: 10px" :label="1">限制</el-radio>
          <el-input-number
            :disabled="ruleForm.makeUp == 0"
            :controls="false"
            :min="1"
            style="width: 245px"
            v-model="ruleForm.number"
            label="请输入"
          ></el-input-number>
        </el-form-item>
        <br />
        <el-form-item label="单选题数量" prop="radio">
          <el-input-number
            :controls="false"
            :min="0"
            style="width: 400px"
            v-model="ruleForm.radio"
            label="请输入"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="单选题分数" prop="radioScore">
          <el-input-number
            :controls="false"
            :min="0"
            style="width: 400px"
            v-model="ruleForm.radioScore"
            label="请输入"
          ></el-input-number>
        </el-form-item>
        <br />
        <el-form-item label="多选题数量" prop="multi">
          <el-input-number
            :controls="false"
            :min="0"
            style="width: 400px"
            v-model="ruleForm.multi"
            label="请输入"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="多选题每题分数" prop="multiScore">
          <el-input-number
            :controls="false"
            :min="0"
            style="width: 400px"
            v-model="ruleForm.multiScore"
            label="请输入"
          ></el-input-number>
        </el-form-item>
        <br />
        <el-form-item label="少选，所选的每个选项" prop="few">
          <el-input-number
            :controls="false"
            :min="0"
            style="width: 810px"
            v-model="ruleForm.few"
            label="请输入"
          ></el-input-number>
        </el-form-item>
        <br />
        <el-form-item label="判断题数量" prop="judge">
          <el-input-number
            :controls="false"
            :min="0"
            style="width: 400px"
            v-model="ruleForm.judge"
            label="请输入"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="判断题每题分数" prop="judgeScore">
          <el-input-number
            :controls="false"
            :min="0"
            style="width: 400px"
            v-model="ruleForm.judgeScore"
            label="请输入"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShowTest = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false">
      <span>确定删除吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="delOk">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 培训统计对话框 -->
    <el-dialog title="培训统计" :visible.sync="isShowStatistics" width="600px" :close-on-click-modal="false">
      <div v-loading="statisticsLoading">
        <div v-if="statisticsData" class="statistics-content">
          <div class="stat-item">
            <label>参加人员总数：</label>
            <span class="stat-value">{{ statisticsData.participate_count }}人</span>
          </div>
          <div class="stat-item">
            <label>累计已学时长：</label>
            <span class="stat-value">{{ statisticsData.study_hours }}小时</span>
          </div>
          <div class="stat-item">
            <label>学习完成人数：</label>
            <span class="stat-value">{{ statisticsData.completed_count }}人</span>
          </div>
          <div class="stat-item">
            <label>学习未完成人数：</label>
            <span class="stat-value">{{ statisticsData.uncompleted_count }}人</span>
          </div>
          <div class="stat-item">
            <label>参加考试人数：</label>
            <span class="stat-value">{{ statisticsData.exam_participate_count }}人</span>
          </div>
          <div class="stat-item">
            <label>考试合格人数：</label>
            <span class="stat-value">{{ statisticsData.exam_pass_count }}人</span>
          </div>
          <div class="stat-item">
            <label>考试不合格人数：</label>
            <span class="stat-value">{{ statisticsData.exam_fail_count }}人</span>
          </div>
          <div class="stat-item">
            <label>未参加考试人数：</label>
            <span class="stat-value">{{ statisticsData.exam_not_participate_count }}人</span>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { dateFormat } from '../../libs/util';
import { PlanList, TrainTypeTree, PlanNullify,PlanCopy,PlanOnline, PlanStatistics } from '@/api/manage';
export default {
  name: 'cultivate',
  data() {
    return {
      activeName: 'first',
      tabsList: [
        { label: '草稿', status: 2, name: 'second' },
        { label: '上线', status: 9, name: 'first' },
        { label: '废弃', status: 1, name: 'third' },
      ],
      tableHeight: 500,
      queryData: {
        plan_name: undefined,
        code: undefined,
        time_status: undefined,
        selected_type_ids: [],
        type_ids: [],
        online_status: 9,
        date: [],
        start_time: undefined,
        end_time: undefined,
        page: 1,
        size: 10,
      },
      total: 0,
      isTableLoading: false,
      tableData: [],
      dialogVisible: false,
      options2: [],
      isShowTest: false,
      ruleForm: {
        testId: '',
        name: '',
        qualified: null,
        makeUp: 0,
        number: null,
        radio: null,
        radioScore: null,
        multi: null,
        multiScore: null,
        few: null,
        judge: null,
        judgeScore: null,
      },
      rules: {
        name: [{ required: true, message: '请输入试卷名称', trigger: 'blur' }],
        qualified: [{ required: true, message: '请输入合格分数', trigger: 'blur' }],
        radio: [{ required: true, message: '请输入单选题数量', trigger: 'blur' }],
        radioScore: [{ required: true, message: '请输入单选题分数', trigger: 'blur' }],
        multi: [{ required: true, message: '请输入多选题数量', trigger: 'blur' }],
        multiScore: [{ required: true, message: '请输入多选题每题分数', trigger: 'blur' }],
        few: [{ required: true, message: '请输入少选，所选的每个选项', trigger: 'blur' }],
        judge: [{ required: true, message: '请输入判断题数量', trigger: 'blur' }],
        judgeScore: [{ required: true, message: '请输入判断题每题分数', trigger: 'blur' }],
        makeUp: [{ required: true, message: '请选择补考次数', trigger: 'change' }],
        testId: [{ required: true, message: '请选择试卷', trigger: 'change' }],
      },
      isShowStatistics: false,
      statisticsLoading: false,
      statisticsData: null,
    };
  },
  watch: {
    'queryData.selected_type_ids'(newValue, oldValue) {
      if (this.queryData.selected_type_ids.length > 0) {
        this.queryData.type_ids = [];
        this.queryData.selected_type_ids.forEach((item) => {
          this.queryData.type_ids.push(item[item.length - 1]);
        });
      } else {
        this.queryData.type_ids = [];
      }
    },
    'queryData.date': {
      handler(newValue, oldValue) {
        if (newValue.length) {
          this.queryData.start_time = newValue[0];
          this.queryData.end_time = newValue[1];
        } else {
          this.queryData.start_time = undefined;
          this.queryData.end_time = undefined;
        }
      },
      deep: true,
    },
  },
  computed: {},
  created() {},
  mounted() {
    this.$nextTick(()=>{
      this.tableHeight = window.innerHeight - 260;
    })
    this.getList();
    this.getTrainTypeTree();
  },
  methods: {
    handleClickTab (tab) {
      // tab index 索引 0: 草稿, 1: 上线, 2: 作废
      // 数据库 1：草稿，2：废弃，9：上线
      if (tab.index == 2) {
        this.queryData.online_status = 2;
      } else if (tab.index == 1) {
        this.queryData.online_status = 9;
      } else {
        this.queryData.online_status = 1;
      }
      this.getList();
    },
    copy(item) {
      this.$confirm('确定复制该培训？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        PlanCopy({
          id: item.id,
        }).then((res) => {
          this.$message({
            type: 'success',
            message: '复制成功',
          });
          this.getList();
        });
      });
    },
    online(item) {
      this.$confirm('确定上线该培训？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        PlanOnline({
          id: item.id,
        }).then((res) => {
          this.$message({
            type: 'success',
            message: '上线成功',
          });
          this.getList();
        });
      });
    },
    nullify(item) {
      this.$confirm('确定作废该培训？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        PlanNullify({
          id: item.id,
        }).then((res) => {
          this.$message({
            type: 'success',
            message: '作废成功',
          });
          this.getList();
        });
      });
    },
    search() {
      this.queryData.page = 1;
      this.getList();
    },
    reset() {
      this.queryData.plan_name = '';
      this.queryData.code = '';
      this.queryData.time_status = undefined;
      this.queryData.online_status = undefined;
      this.queryData.selected_type_ids = [];
      this.queryData.date = [];
      this.queryData.start_time = undefined;
      this.queryData.end_time = undefined;
      this.search();
    },
    edit(item) {
      this.$router.push({
        path: '/company/addCultivate/index',
        query: {
          id: item.id,
          type: 1,
        },
      });
    },
    course(item) {
      this.$router.push({
        path: '/company/courseList/index',
        query: {
          id: item.id,
        },
      });
    },
    setTest() {
      this.isShowTest = true;
    },
    student(item) {
      this.$router.push({
        path: '/company/studentList/index',
        query: {
          id: item.id,
        },
      });
    },
    del(item) {
      this.dialogVisible = true;
      this.item = item;
    },
    delOk() {
      this.$delete(this.tableData, this.item.$index);
      this.dialogVisible = false;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.ruleForm);
        } else {
          this.$message.error('请正确填写！');
          return false;
        }
      });
    },
    add() {
      this.$router.push({
        path: '/company/addCultivate/index',
      });
    },
    set() {
      this.$router.push({
        path: '/company/setRule/index',
      });
    },
    getList() {
      this.isTableLoading = true;
      PlanList(this.queryData).then((res) => {
        this.tableData = res.data.list;
        this.total = res.data.total;
        this.isTableLoading = false;
      });
    },
    getTrainTypeTree() {
      TrainTypeTree().then((res) => {
        this.options2 = res.data.list;
      });
    },
    showStatistics(item) {
      this.isShowStatistics = true;
      this.getStatisticsData(item.id);
    },
    cartList(row) {
      this.$router.push({
        path: '/company/cartList/index',
        query: {
          id: row.id,
        },
      });
    },
    getStatisticsData(id) {
      this.statisticsLoading = true;
      PlanStatistics({ id }).then((res) => {
        this.statisticsData = res.data;
        this.statisticsLoading = false;
      }).catch((error) => {
        this.$message.error('获取统计数据失败');
        this.statisticsLoading = false;
      });
    },
  },
};
</script>

<style scoped>
.head {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  background: #ffffff;
  border-radius: 5px;
  padding: 20px;
  padding-bottom: 0px;
}
.input {
  display: flex;
  align-items: center;
  margin-right: 15px;
  margin-bottom: 20px;
}
.input > span {
  font-size: 12px;
  flex-shrink: 0;
}
.btn {
  margin-bottom: 20px;
}
.box {
  width: 100%;
  background: #ffffff;
  border-radius: 5px;
  padding: 20px;
  margin-top: 20px;
}
.action {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.action span {
  color: #0256ff;
  font-size: 12px;
  cursor: pointer;
  margin: 0 8px;
}
.form {
  max-height: 58vh;
  overflow: auto;
}
.form /deep/ .el-form-item__label {
  line-height: 14px;
}
.flex {
  width: 100%;
  display: flex;
  align-items: center;
}
.link {
  color: #0256ff;
  flex-shrink: 0;
  cursor: pointer;
  text-decoration: underline;
  margin-left: 10px;
  font-size: 12px;
}
.authorize_title {
  font-size: 12px;
  margin-bottom: 15px;
}
.statistics-content {
  padding: 20px 0;
}
.stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}
.stat-item:last-child {
  border-bottom: none;
}
.stat-item label {
  font-weight: bold;
  color: #333;
  font-size: 14px;
}
.stat-value {
  color: #0256ff;
  font-weight: bold;
  font-size: 16px;
}
</style>
